<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入初始化样式 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入字体图标 -->
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2706618_ga8ubnzb2cl.css?spm=a313x.7781069.1998910419.95&file=font_2706618_ga8ubnzb2cl.css">
    <script src="./js/animate.js"></script>
    <style>
        .focus {
            position: relative;
            float: left;
            width: 721px;
            height: 455px;
            overflow: hidden;
        }

        .focus ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 600%;
        }

        .focus ul li {
            float: left;
        }

        .arrow-l,
        .arrow-r {
            display: none;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 24px;
            height: 40px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-family: 'icomoon';
            font-size: 18px;
            z-index: 2;
        }

        .arrow-r {
            right: 0;
        }

        .circle {
            position: absolute;
            bottom: 10px;
            left: 53px;
        }

        .circle li {
            float: left;
            width: 8px;
            height: 8px;
            border: 2px solid rgba(255, 255, 255, 0.5);
            margin: 0 3px;
            border-radius: 50%;
            /*鼠标经过显示小手*/
            cursor: pointer;
        }

        .current {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <!-- focus制作 -->
    <div class="focus">
        <!-- 左侧按钮 -->
        <a href="javascript:;" class="arrow-l iconfont"></a>
        <!-- 右侧按钮 -->
        <a href="javascript:;" class="arrow-r iconfont"></a>
        <!-- 滚动区域 -->
        <ul>
            <li> <a href="#"><img src="upload/focus1.png"></a></li>
            <li> <a href="#"><img src="upload/focus2.jpg"></a></li>
            <li> <a href="#"><img src="upload/focus3.jpg"></a></li>
            <li> <a href="#"><img src="upload/focus4.jpg"></a></li>
            <li> <a href="#"><img src="upload/focus2.jpg"></a></li>
        </ul>
        <!-- 小圆圈 -->
        <ol class="circle">
        </ol>
    </div>
    <script>
        window.addEventListener('load', function () {
            // 获取元素
            var focus = document.querySelector('.focus');
            var arrow_l = document.querySelector('.arrow-l');
            var arrow_r = document.querySelector('.arrow-r');
            var focusWidth = focus.offsetWidth;
            // 鼠标经过focus 就显示隐藏左右按钮
            focus.addEventListener('mouseenter', function () {
                arrow_l.style.display = 'block';
                arrow_r.style.display = 'block';
                clearInterval(timer);
                timer = null;//清空定时器(如果不清空定时器，鼠标离开之后不会再重启(可能出现Bug))
            });
            focus.addEventListener('mouseleave', function () {
                arrow_l.style.display = 'none';
                arrow_r.style.display = 'none';
                timer = setInterval(function () {
                    // 手动调用点击事件
                    arrow_r.click();
                }, 2000);
            });
            // 动态生成小圆圈 有几张图片就生成几个小圆圈
            var ul = focus.querySelector('ul');
            var ol = focus.querySelector('.circle');
            for (var i = 0; i < ul.children.length; i++) {
                // 创建小li
                var li = document.createElement('li');
                // 用自定义元素 给我们的小li添加索引号
                li.setAttribute('data-index', i);
                // 把小li插入到ol里面
                ol.append(li);
                // 小圆圈的排他思想
                li.addEventListener('click', function () {
                    for (var j = 0; j < ol.children.length; j++) {
                        ol.children[j].className = '';
                    }
                    this.className = 'current';


                    // 点击小圆圈 移动的是ul 不是li
                    // ul的移动距离是小圆圈的索引号乘以li里面图片的宽度 注意是负值
                    // var focusWidth = focus.offsetWidth;
                    // console.log(focusWidth);
                    // 当我们点击了某个小li 就拿到当前小li的索引号
                    var data_index = this.getAttribute('data-index');
                    // 此处为bug解决，因为后面的num 和 circle变量和点击事件没有关系，所以将num 和 circle放到点击事件当中，并将data_index的值给他们
                    // 当我们点击了某个小li 就要把这个li 的索引号给 num
                    num = data_index;
                    // 当我们点击了某个小li 就要把这个li 的索引号给 circle
                    circle = data_index;
                    num = circle = data_index;
                    // console.log(data_index);
                    // animate(obj, target, time, callback);
                    animate(ul, - data_index * focusWidth, 15, function () { });
                });
            }
            // 把ol里面第一个小li设置类名为current
            ol.children[0].className = 'current';
            // 6.克隆第一张图片
            var first = ul.children[0].cloneNode(true);
            ul.appendChild(first);
            // 7.点击右侧按钮，图片滚动
            var num = 0;
            // 声明一个circle变量，控制小圆圈变化
            var circle = 0;
            var flag = true;//创建一个节流阀
            arrow_r.addEventListener('click', function () {
                if (flag) {
                    flag = false;//关闭节流阀
                    if (num == ul.children.length - 1) {
                        ul.style.left = 0;
                        num = 0;
                    }
                    num++;
                    // 核心算法：设置一个变量，每点击一次变量自加1，用变量乘以图片的宽度 同样注意是负值
                    animate(ul, - num * focusWidth, 15, function () {
                        flag = true;//打开节流阀
                    });
                    // 8.点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
                    circle++;
                    // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
                    if (circle == ol.children.length) {
                        circle = 0;
                    }
                    circleChange();
                }

            });
            // 9.左侧按钮
            arrow_l.addEventListener('click', function () {
                if (flag) {
                    flag = false;//关闭节流阀
                    if (num == 0) {
                        num = ul.children.length - 1;
                        ul.style.left = -num * focusWidth + 'px';
                    }
                    num--;
                    // 核心算法：设置一个变量，每点击一次变量自加1，用变量乘以图片的宽度 同样注意是负值
                    animate(ul, -num * focusWidth, 15, function () {
                        flag = true;
                    });
                    circle--;
                    // 如果circle < 0 说明走到最后我们克隆的这张图片了 我们就复原
                    if (circle < 0) {
                        circle = ol.children.length - 1;
                    }
                    circleChange();
                }
            });
            function circleChange() {
                // 先清除其余小圆圈的current类名
                for (let i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                // 留下当前的小圆圈的current类名
                ol.children[circle].className = 'current';
            }
            // 10.自动播放轮播图
            var timer = this.setInterval(function () {
                // 手动调用点击事件
                arrow_r.click();
            }, 2000);
        });
    </script>
</body>

</html>